<template>
  <div class="item-list-page">
    <div class="page-header">
      <div class="header-actions">
        <h1 class="page-title">🛍️ 二手商品列表</h1>
        <button @click="showPublishModal = true" class="publish-btn">
          ✅ 发布商品
        </button>
      </div>
      
      <!-- 搜索和筛选区域 -->
      <div class="filter-section">
        <div class="search-box">
          <input 
            v-model="searchKeyword" 
            type="text" 
            placeholder="搜索商品名称..."
            class="search-input"
            @keyup.enter="handleSearch"
          />
          <button @click="handleSearch" class="search-btn">🔍 搜索</button>
        </div>
        
        <div class="category-filter">
          <label>分类：</label>
          <select v-model="selectedCategory" @change="handleCategoryChange" class="category-select">
            <option value="">全部分类</option>
            <option value="电子产品">电子产品</option>
            <option value="图书教材">图书教材</option>
            <option value="运动器材">运动器材</option>
            <option value="生活用品">生活用品</option>
            <option value="其他">其他</option>
          </select>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <!-- 商品列表 -->
    <div v-else-if="items.length > 0" class="items-grid">
      <div v-for="item in items" :key="item.id" class="item-card">
        <div class="item-image">
          <img :src="Array.isArray(item.images) ? (item.images[0] || defaultImage) : (item.images || defaultImage)" :alt="item.title" @error="handleImageError" />
          <span class="item-status" :class="item.status">
            {{ item.status === 'available' ? '在售' : '已售出' }}
          </span>
        </div>
        
        <div class="item-info">
          <h3 class="item-title">{{ item.title }}</h3>
          <div class="item-meta">
            <span class="item-price">￥{{ item.price.toFixed(2) }}</span>
            <span class="item-condition">{{ item.conditionLevel }}</span>
          </div>
          <div class="item-footer">
            <span class="item-category">🏷️ {{ item.category }}</span>
            <span class="item-views">👁️ {{ item.viewCount }}</span>
          </div>
          <button @click="viewDetail(item.id)" class="view-btn">查看详情</button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">📦</div>
      <p>暂无商品</p>
      <p class="empty-hint">试试搜索其他关键词或更改筛选条件</p>
    </div>

    <!-- 分页 -->
    <div v-if="totalPages > 1" class="pagination">
      <button 
        @click="changePage(currentPage - 1)" 
        :disabled="currentPage === 1"
        class="page-btn"
      >
        上一页
      </button>
      
      <span class="page-info">
        第 {{ currentPage }} / {{ totalPages }} 页 (共 {{ total }} 件商品)
      </span>
      
      <button 
        @click="changePage(currentPage + 1)" 
        :disabled="currentPage === totalPages"
        class="page-btn"
      >
        下一页
      </button>
    </div>

    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-message">
      {{ errorMessage }}
    </div>
  
    <!-- 发布商品模态框 -->
    <div v-if="showPublishModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>📝 发布二手商品</h2>
          <button @click="closeModal" class="close-btn">×</button>
        </div>
        
        <div class="modal-body">
          <div class="publish-form">
            <!-- 图片上传区域 -->
            <div class="form-group image-upload-group">
              <label class="form-label">商品图片 <span class="required">*</span></label>
              <div class="image-upload-area">
                <div v-if="!imagePreview" class="upload-placeholder" @click="triggerFileInput">
                  <div class="upload-icon">📷</div>
                  <p>点击上传商品图片</p>
                  <p class="upload-hint">支持 jpg、png、gif、webp 格式，最大 10MB</p>
                </div>
                
                <div v-else class="image-preview-container">
                  <img :src="imagePreview" alt="商品图片" class="image-preview" />
                  <div class="image-actions">
                    <button @click="triggerFileInput" class="change-image-btn">更换图片</button>
                    <button @click="removeImage" class="remove-image-btn">删除图片</button>
                  </div>
                </div>
                
                <input 
                  type="file" 
                  ref="fileInput" 
                  accept="image/*" 
                  @change="handleImageChange" 
                  style="display: none;"
                />
              </div>
              <p v-if="uploadProgress > 0 && uploadProgress < 100" class="upload-progress">
                上传进度: {{ uploadProgress }}%
              </p>
            </div>

            <!-- 商品标题 -->
            <div class="form-group">
              <label class="form-label">商品标题 <span class="required">*</span></label>
              <input 
                v-model="formData.title" 
                type="text" 
                placeholder="请输入商品标题（如：九成新MacBook Pro）"
                class="form-input"
                maxlength="50"
              />
              <span class="char-count">{{ formData.title.length }}/50</span>
            </div>

            <!-- 商品描述 -->
            <div class="form-group">
              <label class="form-label">商品描述</label>
              <textarea 
                v-model="formData.description" 
                placeholder="请详细描述商品的状况、购买时间、使用情况等..."
                class="form-textarea"
                rows="5"
                maxlength="500"
              ></textarea>
              <span class="char-count">{{ formData.description.length }}/500</span>
            </div>

            <!-- 商品价格 -->
            <div class="form-group">
              <label class="form-label">商品价格 <span class="required">*</span></label>
              <div class="price-input-wrapper">
                <span class="price-symbol">¥</span>
                <input 
                  v-model="formData.price" 
                  type="number" 
                  placeholder="请输入价格"
                  class="form-input price-input"
                  step="0.01"
                  min="0"
                />
              </div>
            </div>

            <!-- 商品成色 -->
            <div class="form-group">
              <label class="form-label">商品成色</label>
              <select v-model="formData.conditionLevel" class="form-select">
                <option value="">请选择成色</option>
                <option value="全新">全新</option>
                <option value="九成新">九成新</option>
                <option value="八成新">八成新</option>
                <option value="七成新">七成新</option>
                <option value="六成新及以下">六成新及以下</option>
              </select>
            </div>

            <!-- 商品分类 -->
            <div class="form-group">
              <label class="form-label">商品分类</label>
              <select v-model="formData.category" class="form-select">
                <option value="">请选择分类</option>
                <option value="电子产品">电子产品</option>
                <option value="图书教材">图书教材</option>
                <option value="运动器材">运动器材</option>
                <option value="生活用品">生活用品</option>
                <option value="其他">其他</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <!-- 提示信息 -->
          <p v-if="publishMessage" :class="['publish-message', publishMessageType]">{{ publishMessage }}</p>
          
          <!-- 按钮组 -->
          <div class="form-actions">
            <button @click="handlePublish" class="publish-btn" :disabled="publishing">
              {{ publishing ? '发布中...' : '✅ 发布商品' }}
            </button>
            <button @click="handleReset" class="reset-btn" :disabled="publishing">
              🔄 重置表单
            </button>
            <button @click="closeModal" class="cancel-btn" :disabled="publishing">
              ❌ 取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getItemsList, publishItem, uploadItemImage, type SecondHandItemList } from '../../api/secondHandItem';

const router = useRouter();

// 使用 base64 编码的 SVG 占位符，避免依赖外部服务
const defaultImage = '';

const loading = ref(false);
const items = ref<SecondHandItemList[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(12);
const totalPages = ref(0);

const searchKeyword = ref('');
const selectedCategory = ref('');
const errorMessage = ref('');

// 发布商品相关状态
const showPublishModal = ref(false);
const fileInput = ref<HTMLInputElement | null>(null);
const imagePreview = ref('');
const uploadedImageUrl = ref('');
const uploadProgress = ref(0);
const publishing = ref(false);
const publishMessage = ref('');
const publishMessageType = ref<'success' | 'error'>('success');

// 发布商品表单数据
const formData = ref({
  title: '',
  description: '',
  price: '',
  conditionLevel: '',
  category: '',
});

// 加载商品列表
const loadItems = async () => {
  loading.value = true;
  errorMessage.value = '';
  
  try {
    const res = await getItemsList({
      category: selectedCategory.value || undefined,
      keyword: searchKeyword.value || undefined,
      page: currentPage.value,
      size: pageSize.value
    });
    
    if (res.success && res.data) {
      items.value = res.data.items;
      total.value = res.data.total;
      totalPages.value = Math.ceil(total.value / pageSize.value);
    } else {
      errorMessage.value = res.message || '获取商品列表失败';
    }
  } catch (error: any) {
    console.error('加载商品列表失败:', error);
    errorMessage.value = error.message || '请求失败，请稍后重试';
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  loadItems();
};

// 分类筛选
const handleCategoryChange = () => {
  currentPage.value = 1;
  loadItems();
};

// 分页
const changePage = (page: number) => {
  if (page < 1 || page > totalPages.value) return;
  currentPage.value = page;
  loadItems();
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 查看详情
const viewDetail = (id: number) => {
  router.push(`/shop/detail/${id}`);
};

// 图片加载错误处理
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement;
  target.src = defaultImage;
};

// 发布商品相关方法
const triggerFileInput = () => {
  fileInput.value?.click();
};

// 处理图片选择
const handleImageChange = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return;
  
  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    publishMessage.value = '请选择图片文件';
    publishMessageType.value = 'error';
    return;
  }
  
  // 验证文件大小（10MB）
  if (file.size > 10 * 1024 * 1024) {
    publishMessage.value = '图片大小不能超过10MB';
    publishMessageType.value = 'error';
    return;
  }
  
  // 预览图片
  const reader = new FileReader();
  reader.onload = (e) => {
    imagePreview.value = e.target?.result as string;
  };
  reader.readAsDataURL(file);
  
  // 上传图片
  try {
    uploadProgress.value = 10;
    publishMessage.value = '上传中...';
    publishMessageType.value = 'success';
    
    const userId = localStorage.getItem('userId');
    if (!userId) {
      publishMessage.value = '未登录，请先登录';
      publishMessageType.value = 'error';
      return;
    }
    
    uploadProgress.value = 50;
    const res = await uploadItemImage(file, Number(userId));
    
    if (res.success && res.data?.url) {
      uploadedImageUrl.value = res.data.url;
      uploadProgress.value = 100;
      publishMessage.value = '图片上传成功！';
      publishMessageType.value = 'success';
      
      setTimeout(() => {
        uploadProgress.value = 0;
        publishMessage.value = '';
      }, 2000);
    } else {
      publishMessage.value = res.message || '上传失败';
      publishMessageType.value = 'error';
      uploadProgress.value = 0;
    }
  } catch (error: any) {
    console.error('上传图片失败:', error);
    publishMessage.value = error.message || '上传失败，请稍后重试';
    publishMessageType.value = 'error';
    uploadProgress.value = 0;
  }
};

// 删除图片
const removeImage = () => {
  imagePreview.value = '';
  uploadedImageUrl.value = '';
  if (fileInput.value) {
    fileInput.value.value = '';
  }
};

// 关闭模态框
const closeModal = () => {
  if (!publishing.value) {
    showPublishModal.value = false;
    handleReset();
  }
};

// 发布商品
const handlePublish = async () => {
  // 表单验证
  if (!formData.value.title.trim()) {
    publishMessage.value = '请输入商品标题';
    publishMessageType.value = 'error';
    return;
  }
  
  if (!formData.value.price || Number(formData.value.price) <= 0) {
    publishMessage.value = '请输入正确的商品价格';
    publishMessageType.value = 'error';
    return;
  }
  
  const userId = localStorage.getItem('userId');
  if (!userId) {
    publishMessage.value = '未登录，请先登录';
    publishMessageType.value = 'error';
    router.push('/login');
    return;
  }
  
  publishing.value = true;
  publishMessage.value = '';
  
  try {
      // 添加调试信息
      console.log('uploadedImageUrl类型:', typeof uploadedImageUrl.value);
      console.log('uploadedImageUrl值:', uploadedImageUrl.value);
      console.log('是否为数组:', Array.isArray(uploadedImageUrl.value));
      
      // 更严格地确保images参数是字符串类型
      let imageString = '';
      if (uploadedImageUrl.value) {
        if (Array.isArray(uploadedImageUrl.value)) {
          // 如果是数组，只取第一个元素并转为字符串
          imageString = String(uploadedImageUrl.value[0] || '');
          console.log('从数组中提取字符串:', imageString);
        } else {
          imageString = String(uploadedImageUrl.value);
        }
      }
      console.log('最终imageString类型:', typeof imageString);
      console.log('最终imageString值:', imageString);
      
      // 创建新的参数对象，显式转换所有字段类型
      const publishParams = {
        userId: String(userId),
        title: String(formData.value.title.trim()),
        description: String(formData.value.description.trim()),
        price: String(formData.value.price),
        conditionLevel: formData.value.conditionLevel ? String(formData.value.conditionLevel) : '',
        category: formData.value.category ? String(formData.value.category) : '',
        images: imageString
      };
      
      console.log('发布参数对象:', publishParams);
      console.log('发布参数images类型:', typeof publishParams.images);
      
      const res = await publishItem(publishParams);
    
    if (res.success) {
      publishMessage.value = '商品发布成功！';
      publishMessageType.value = 'success';
      
      // 重新加载商品列表
      loadItems();
      
      // 1.5秒后关闭模态框并重置表单
      setTimeout(() => {
        showPublishModal.value = false;
        handleReset();
      }, 1500);
    } else {
      publishMessage.value = res.message || '发布失败';
      publishMessageType.value = 'error';
    }
  } catch (error: any) {
    console.error('发布商品失败:', error);
    publishMessage.value = error.message || '发布失败，请稍后重试';
    publishMessageType.value = 'error';
  } finally {
    publishing.value = false;
  }
};

// 重置表单
const handleReset = () => {
  formData.value = {
    title: '',
    description: '',
    price: '',
    conditionLevel: '',
    category: '',
  };
  removeImage();
  publishMessage.value = '';
  uploadProgress.value = 0;
};

// 组件挂载时加载数据
onMounted(() => {
  loadItems();
});
</script>

<style scoped>
.item-list-page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 70px);
}

.page-header {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #333;
  margin: 0 0 20px 0;
  text-align: center;
}

/* 搜索和筛选区域 */
.filter-section {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  display: flex;
  gap: 10px;
  min-width: 300px;
}

.search-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.search-input:focus {
  outline: none;
  border-color: #52C41A;
}

.search-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #52C41A 0%, #389e0d 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}

.category-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-filter label {
  font-weight: 500;
  color: #666;
  font-size: 15px;
}

.category-select {
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.3s;
  min-width: 150px;
}

.category-select:focus {
  outline: none;
  border-color: #52C41A;
}

/* 加载状态 */
.loading {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #52C41A;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading p {
  color: #999;
  font-size: 16px;
}

/* 商品网格 */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.item-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  cursor: pointer;
}

.item-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.item-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f5f5f5;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.item-card:hover .item-image img {
  transform: scale(1.1);
}

.item-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  background-color: #52C41A;
}

.item-status.sold {
  background-color: #999;
}

.item-info {
  padding: 16px;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-price {
  font-size: 22px;
  font-weight: bold;
  color: #ff4d4f;
}

.item-condition {
  padding: 4px 10px;
  background-color: #f0f9ff;
  color: #1890ff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  margin-bottom: 12px;
}

.item-category,
.item-views {
  font-size: 13px;
  color: #999;
}

.view-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #52C41A 0%, #389e0d 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.view-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.empty-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.empty-state p {
  font-size: 18px;
  color: #666;
  margin: 10px 0;
}

.empty-hint {
  font-size: 14px;
  color: #ffffff;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.page-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #52C41A 0%, #389e0d 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}

.page-btn:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
  opacity: 0.6;
}

.page-info {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

/* 错误提示 */
.error-message {
  margin-top: 20px;
  padding: 16px;
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
  border-radius: 8px;
  text-align: center;
}

/* 头部操作区 */
.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.publish-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.publish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e8e8e8;
}

.modal-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.close-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 0 24px 24px 24px;
}

/* 发布表单样式 */
.publish-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-label {
  font-weight: 600;
  color: #333;
  font-size: 15px;
}

.required {
  color: #ff4d4f;
  margin-left: 4px;
}

.form-input,
.form-textarea,
.form-select {
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s;
  font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #52C41A;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.char-count {
  align-self: flex-end;
  font-size: 12px;
  color: #999;
  margin-top: -4px;
}

/* 价格输入 */
.price-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.price-symbol {
  position: absolute;
  left: 16px;
  font-size: 18px;
  font-weight: bold;
  color: #ff4d4f;
}

.price-input {
  padding-left: 36px;
}

/* 图片上传区域 */
.image-upload-group {
  margin-bottom: 10px;
}

.image-upload-area {
  width: 100%;
}

.upload-placeholder {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fafafa;
}

.upload-placeholder:hover {
  border-color: #52C41A;
  background-color: #f6ffed;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.upload-placeholder p {
  margin: 8px 0;
  color: #666;
  font-size: 15px;
}

.upload-hint {
  font-size: 13px;
  color: #999;
}

.image-preview-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.image-preview {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
}

.image-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.change-image-btn,
.remove-image-btn {
  flex: 1;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.change-image-btn {
  background-color: #1890ff;
  color: white;
}

.change-image-btn:hover {
  background-color: #096dd9;
  transform: translateY(-2px);
}

.remove-image-btn {
  background-color: #ff4d4f;
  color: white;
}

.remove-image-btn:hover {
  background-color: #cf1322;
  transform: translateY(-2px);
}

.upload-progress {
  margin-top: 8px;
  font-size: 14px;
  color: #52C41A;
  font-weight: 500;
}

/* 按钮组 */
.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.form-actions .publish-btn {
  flex: 2;
  padding: 14px;
}

.reset-btn,
.cancel-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
}

.reset-btn:hover:not(:disabled) {
  background-color: #e8e8e8;
}

.cancel-btn {
  background-color: #fff;
  color: #999;
  border: 1px solid #e8e8e8;
}

.cancel-btn:hover:not(:disabled) {
  background-color: #f5f5f5;
  color: #666;
}

.publish-btn:disabled,
.reset-btn:disabled,
.cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 消息提示 */
.publish-message {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.publish-message.success {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.publish-message.error {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

/* 响应式 */
@media (max-width: 768px) {
  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
  
  .pagination {
    flex-direction: column;
    gap: 15px;
  }
}
</style>
